<template>
  <div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center">
    <canvas id="canvas" style="width: 50%;height: 50%"></canvas>
  </div>
</template>

<script>
export default {
  name: "Login2",
  data() {
    return {
      loveWords: ''
    };
  },
  mounted() {


    this.getLoveWords()
  },
  methods: {
    render(text) {
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext('2d')

      // 垂直方向对齐为top:
      ctx.beginPath()
      ctx.font = '30px Verdana'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'top'
      ctx.fillText(text, 120, 300, 600)
      ctx.globalAlpha = 0.5
      // 创建渐变
      const gradient = ctx.createLinearGradient(0, 0, 700, 0);
      gradient.addColorStop(0, "skyblue"); // 第一个偏移值为0
      gradient.addColorStop(1, "#fffc96"); // 第一个偏移值为1
      ctx.beginPath()
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, 700, 600)
      ctx.fill()

    },
    //得到情话
    getLoveWords() {
      this.axios.get("/api/boasts/random").then(({data}) => {
        if (data.flag) {
          this.loveWords = data.data.content
          this.render(data.data.content)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>